<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="阿福易购">
    <meta content="telephone=no" name="format-detection" />
    <meta content="email=no" name="format-detection" />
    <!-- uc、qq浏览器 -->
    <meta name="screen-orientation" content="portrait">
    <meta name="full-screen" content="yes">
    <meta name="browsermode" content="application">
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="x5-page-mode" content="app">
    <meta name="HandheldFriendly" content="true">
    <meta name="MobileOptimized" content="320">
    <meta name="keywords" content="{{$SEO['keywords']}}"/>
    <meta name="description" content="{{$SEO['description']}}"/>
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <title>搜索_{{$SEO['title']}}</title>
    <link rel="stylesheet" href="{{ asset('/build/css/app.min.css') }}">
</head>
<body class="ui-search-page" ontouchstart="">
{!! Form::open(['url'=>'/search/result?page=1','method'=>'get']) !!}
<section class="J-header af-header-searchbar ui-searchbar-wrap focus">
        <i ontouchstart="window.history.back();" class="ui-icon-return"></i>
        <div class="ui-searchbar ui-border-radius">
            <i class="ui-icon-search"></i>
            <div class="ui-searchbar-input">
            <input name="shop_id" type="hidden" value="{{$shop_id}}">
            <input class="keyword" value="" name="keyword" autofocus="autofocus" type="text" placeholder="搜索你想要的商品" autocapitalize="off">
            </div>
            <i class="ui-icon-close"></i>
        </div>
        <button type="submit" class="ui-searchbar-submit">搜索</button>
</section>
{!! Form::close() !!}

<div class="ui-container">
    <section class="ui-search-label ui-panel">
        <h2 class="af-border-b">热搜</h2>
        <div class="ui-label-list">
            @foreach($keyWords as $key)
            <label onclick="window.location.href='/search/result?keyword={{$key['keyword']}}'" class="ui-label">{{$key['keyword']}}</label>
            @endforeach
        </div>
    </section>
    <section class="ui-search-label ui-panel">
        <h2 class="af-border-b"><span>历史搜索</span> <span class="ui-panel-title-tips"><i class="ui-icon-delete" style="font-size: 24px;"></i></span></h2>
        <ul class="J-history ui-list ui-list-pure af-border-b af-hide"></ul>
    </section>

</div>

<script src="{{ asset('/build/lib/zepto.min.js') }}"></script>
<script src="{{ asset('/build/js/frozen.js') }}"></script>
<script src="{{ asset('/build/js/app.min.js') }}"></script>
<script type="text/javascript">
    var header=$('.J-header'),
            clearBtn=header.find('.ui-icon-close'),
            submitBtn=header.find('.ui-searchbar-submit'),
            input=header.find('.keyword'),
            list= $('.J-history');

    var storage=getItem()||'';
    var historyArr=storage.split(",");

    clearBtn.tap(function () {
        input.val('').focus();
    });

    //搜索
    submitBtn.on('click',function () {
        var val=input.val();

        val&&historyArr.unshift(val);
        historyArr=UniqueArray(historyArr);
        if(historyArr.length>10){
            historyArr=historyArr.slice(0,10);
        }
        setItem(historyArr.join(','));
    });

    var lis=[];
    for(var i=0;i<historyArr.length;i++){
        historyArr[i]&&lis.push('<li data-href="/search/result?keyword='+historyArr[i]+'" class="af-border-b"><h4>'+historyArr[i]+'</h4></li>');
    }
    if(lis.length){
        list.append(lis.join(''));
        list.show();
    }else{
        list.hide();
    }

    $('.ui-icon-delete').on('click',function () {
        setItem('');
        list.html('');
    });


    function setItem(data) {
        if (window.localStorage) {
            localStorage.setItem("history", data);
        } else {
            Cookie.write("history", data);
        }
    }

    function getItem() {
        return window.localStorage? localStorage.getItem("history"): Cookie.read("history");
    }

</script>
</body>
</html>